<template>
  <div class="shopping-list" v-if="items.length > 0">
    <h3>购物清单：</h3>
    <ul class="shopping-items">
      <li 
        v-for="(item, index) in items" 
        :key="index" 
        class="shopping-item"
        :class="{ 'purchased': item.purchased }"
      >
        <input 
          type="checkbox" 
          v-model="item.purchased" 
          class="purchase-checkbox"
        />
        <span class="item-name">{{ item.name }}</span>
        <span class="item-quantity">{{ item.quantity }}</span>
        <button @click="removeItem(index)" class="remove-button">删除</button>
      </li>
    </ul>
    
    <div class="list-actions">
      <button @click="clearPurchased" class="clear-button">
        清除已购买
      </button>
      <button @click="clearAll" class="clear-button">
        清空列表
      </button>
    </div>
    
    <div class="add-custom-item">
      <input 
        v-model="customItem.name" 
        placeholder="食材名称" 
        class="custom-input"
      />
      <input 
        v-model="customItem.quantity" 
        placeholder="用量" 
        class="custom-input"
      />
      <button @click="addCustomItem" class="add-custom-button">添加</button>
    </div>
  </div>
  
  <div class="empty-list" v-else>
    <p>购物清单为空</p>
    <p>请先分析菜品并将食材添加到购物清单</p>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';

const props = defineProps({
  items: {
    type: Array,
    default: () => []
  }
});

const emit = defineEmits(['update-items']);

const customItem = reactive({
  name: '',
  quantity: ''
});

const removeItem = (index) => {
  const newItems = [...props.items];
  newItems.splice(index, 1);
  emit('update-items', newItems);
};

const clearPurchased = () => {
  const newItems = props.items.filter(item => !item.purchased);
  emit('update-items', newItems);
};

const clearAll = () => {
  emit('update-items', []);
};

const addCustomItem = () => {
  if (customItem.name.trim()) {
    const newItems = [...props.items];
    newItems.push({
      name: customItem.name,
      quantity: customItem.quantity || '适量',
      purchased: false
    });
    emit('update-items', newItems);
    
    // 清空输入框
    customItem.name = '';
    customItem.quantity = '';
  }
};
</script>

<style scoped>
.shopping-list {
  padding: 20px;
  text-align: center;
}

.shopping-list h3 {
  margin-bottom: 15px;
  color: #333;
}

.shopping-items {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
  text-align: left;
  display: inline-block;
  width: 100%;
  max-width: 400px;
}

.shopping-item {
  padding: 10px 15px;
  margin: 5px 0;
  background-color: #f8f9fa;
  border-radius: 5px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.shopping-item.purchased {
  opacity: 0.6;
  text-decoration: line-through;
}

.purchase-checkbox {
  transform: scale(1.2);
}

.item-name {
  flex: 1;
  font-weight: 500;
}

.item-quantity {
  color: #666;
  min-width: 60px;
  text-align: right;
}

.remove-button {
  padding: 3px 8px;
  background-color: #ff6b6b;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
}

.list-actions {
  margin: 15px 0;
}

.clear-button {
  padding: 8px 15px;
  background-color: #6c757d;
  color: white;
  border: none;
  border-radius: 15px;
  cursor: pointer;
  font-size: 14px;
  margin: 0 5px;
  transition: background-color 0.3s;
}

.clear-button:hover {
  background-color: #5a6268;
}

.add-custom-item {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.custom-input {
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100px;
}

.add-custom-button {
  padding: 8px 15px;
  background-color: #42b883;
  color: white;
  border: none;
  border-radius: 15px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.add-custom-button:hover {
  background-color: #36986f;
}

.empty-list {
  padding: 40px 20px;
  text-align: center;
  color: #666;
}
</style>
